<template>
  <div>
    <h2 v-if="isShow">v-if条件渲染的基本使用</h2>
    <button @click="toggleShow()">切换isShow</button>
    <div>
      <input type="text" v-model="score" />
      <h2 v-if="score >= 90">优秀</h2>
      <h2 v-else-if="score >= 60">良好</h2>
      <h2 v-else-if="score >= 0">不及格</h2>
    </div>
    <template v-if="isVisible">
      <h5>v-if控制多个标签</h5>
      <h5>v-if控制多个标签</h5>
      <h5>v-if控制多个标签</h5>
      <h5>v-if控制多个标签</h5>
    </template>
    <template v-else>
      <h3>v-if控制多个标签</h3>
      <h3>v-if控制多个标签</h3>
      <h3>v-if控制多个标签</h3>
      <h3>v-if控制多个标签</h3>
    </template>
    <button @click="toggleVisible()">isVisible</button>
    <hr />
    <div v-show="isActive">
      <h2>v-show条件渲染基本使用</h2>
      <p>- 如果元素需要根据条件进行频繁的切换，或者条件判断的逻辑较为复杂，建议使用 v-show，因为它的渲染开销较小。</p>
      <p>- 如果元素只需要在特定条件下显示一次，或者在条件判断的逻辑较为简单时，可以使用 v-if。</p>
      <p>如果需要控制元素的初始渲染，也可以使用 v-if</p>
    </div>
    <button @click="toggleActive()">控制isActive</button>
    <hr />
    <div>
      <h2>v-for的基本使用</h2>
      <h3>遍历对象</h3>
      <ul>
        <li v-for="(value, key) in info" :key="key">{{ key }}:{{ value }}</li>
      </ul>
      <h3>遍历数组</h3>
      <ul>
        <li v-for="(value, index) in num" :key="index">第{{ index }}个数:{{ value }}</li>
      </ul>
    </div>
    <div>
      <h3>v-for和template的结合使用</h3>
      <template v-for="item in items">
        <div :key="item.id">
          <h5>{{ item.title }}</h5>
          <p>{{ item.description }}</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isShow: true,
      isVisible: true,
      score: null,
      info: {
        name: 'wxl',
        age: 21,
        sex: 'male'
      },
      num: [1456, 421, 2342, 4534523, 9123],
      items: [
        { id: 1, title: '标题1', description: '这是第一个项目的描述' },
        { id: 2, title: '标题2', description: '这是第一个项目的描述' },
        { id: 3, title: '标题3', description: '这是第一个项目的描述' }
      ]
    }
  },
  methods: {
    toggleShow() {
      this.isShow = !this.isShow
    },
    toggleVisible() {
      this.isVisible = !this.isVisible
    },
    toggleActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>
<style lang="scss" scoped></style>
